<template>
  <div class="swiper">
    <swiper :indicator-dots='true' indicator-color='#EA5A49' :autoplay='true' :interval='6000' :duration='1000' :circular='true'>
      <div :key='imgindex' v-for='(top,imgindex) in imgUrls'>
        <swiper-item>
          <img :src="img.image" mode='aspectFit' v-for='img in top' :key='img.id' class='slide-image' @click='bookDetail(img)'>
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>
<script>
export default {
  props: ['topNine'],
  computed: {
    imgUrls () {
      // 如果通用 请用chunk函数  比如lodash的chunk方法
      let res = this.topNine
      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
    }
  },
  methods: {
    bookDetail (item) {
      wx.navigateTo({
        url: '/pages/detail/main?id=' + item.id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper{
  margin-top:5px;
  .slide-image{
    width:33%;
    height:250rpx;
  }
}
</style>
